<script setup lang='ts' name="app-management">
import { getApplicationList } from '@fl/api/exploit-setting'
import { ElTabPane, ElTabs } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'

import IndexItem from './component/index.vue'

const activeName = ref('0')
const info = ref<any>({})
const list = ref<any>([])

function handleClick(tab: any) {
    info.value = cloneDeep(list.value[tab.index])
}

function getlist() {
    getApplicationList().then((res) => {
        list.value = res.data.reverse()
        info.value = list.value[0]
    })
}

getlist()
</script>

<template>
    <ElTabs v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
    >
        <ElTabPane v-for="item in list"
                   :key="item.appCode"
                   :label="item.appName"
        />

        <IndexItem :key="activeName"
                   :app-item="info"
        />
    </ElTabs>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
